<template>
    <el-container>
        <el-header style="height:30px;background-color:#ffff"  v-show="isShowBtn==1">
           <tool-bar :pageName="pageName"></tool-bar>
        </el-header>
        <el-main justify="center" align="middle" >
            <el-scrollbar>
                <el-card style="height:99%;width:99%">
                    <iframe
                            class="el_sence_table"
                            ref="senTable"
                            frameborder="0"
                            height="100%"
                            name="senceTable"
                            scrollong="no"
                            width="100%"
                            :src="src">
                    </iframe>

                    <WorkCheck v-show="node.FWCSta!=0"
                               :node="node"
                               :isReadonly="isReadonly"
                               :isShowNodeName="isShowNodeName"
                               ref="workCheck"
                    ></WorkCheck>
                </el-card>
            </el-scrollbar>

        </el-main>

    </el-container>
    
    
</template>
<script>
import ToolBar from "./components/tool-bar.vue";
import WorkCheck from "./workopt/workcheck.vue";
export default {
    components: {
        ToolBar,
        WorkCheck
    },
    data(){
        return{
            width:'900px',
            node:null, //节点信息
            mainData:null,//表单数据
            flowData:null,//表单的所有数据
            isShowDiv:false,
            isShowBtn:1,
            form: {
            },
            params:{},
            pageName:"MyView",
            src:"",
            iframeWin:{}, //嵌入的URL
            isReadonly:1,
            isShowNodeName:true //是否显示审核组件的节点名称
        }
    },

    computed:{
        widthStyle: function() {
            return this.flowData.Sys_MapData[0].FrmW + 'px';
        }
    },
    methods:{
        WorkCheck_Save(){
            return this.$refs.workCheck.WorkCheck_Save();
        },
        Save(){
            // 不支持火狐浏览器。
            if (this.iframeWin == null) {
                this.$message('系统错误,没有找到SelfForm的ID.');
                return "";
            }
            //执行保存.
            return this.iframeWin.postMessage({ Save:"Save" }, "*");
        }
      
    },
    created(){
        debugger
        //初始化按钮
        this.params = this.$store.getters.getData;
        this.isShowBtn = this.params.IsShowBtn;
        var handler = new this.HttpHandler("BP.WF.HttpHandler.WF_MyFlow");
        handler.AddJson(this.params);
        var data = handler.DoMethodReturnString("MyFlowSelfForm_Init");
        if(data.indexOf("err@")!=-1){
            this.$message({message:data,type:"error"});
            return;
        }

        data = JSON.parse(data);
        //获取表单数据
        this.flowData = data;
        this.node = this.flowData.WF_Node[0];
        this.mainData = this.flowData.MainTable[0];


        //获取IFrame的URL
        this.src = this.node.FormUrl;
        //暂时考虑全路径的Vue、html


       
    },
    mounted(){
        this.iframeWin = this.$refs.senTable.contentWindow;
        //向iframe发送信息,大括号内是发送的内容;
        this.iframeWin.postMessage(this.$route.params,"*");
        //监听IFrame页面传来的信息
        window.addEventListener("message", this.handleMessage);
    },
    handleMessage (event) {
        // 根据上面制定的结构来解析iframe内部发回来的数据
        const data = event.data
        switch (data.cmd) {
            case 'returnFormJson':
                // 业务逻辑
                break
            case 'returnHeight':
                // 业务逻辑
                break
        }
    }
}

</script>
<style lang="less" scoped>
    html,body,#app,.el-container{
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
        /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度为100%*/
        height: 100%;
    }

    .el-header {
        width: 100%;
        height: 56px !important;
        line-height: 56px;
        padding: 0 20px 0 44px;
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(231, 237, 249, 1);
        box-sizing: border-box;
        /**position: fixed;*/
        /**z-index: 0;*/
        top: 0;
    }
/deep/ .el-scrollbar{
        height: 100%;
    }
/deep/ .el-scrollbar__wrap{
        overflow-y: scroll;
        overflow-x:hidden;

    }
    
</style>

